<div>
    <h2 data-translate="milkbeeApp.monitor.groupMonth">Cards</h2>
    <jhi-alert></jhi-alert>
        <div class="container-fluid">
        <div class="row">
             <div class="form-group col-xs-3">
               	<div class="input-group">
               	<!---->
                    <input  datepicker-options="vm.picker1.datepickerOptions"  enable-time="false" datepicker-mode="'month'" id="field_startDate" placeholder="" type="text" class="form-control" name="startDate" datetime-picker="{{dateformat}}" ng-model="vm.startDate" is-open="vm.datePickerOpenStatus.startDate"
                        />
                    <span class="input-group-btn">
                    <!-- vm.openCalendar('startDate','picker1')" -->
                        <button type="button" class="btn btn-default" ng-click="vm.openCalendar('startDate','picker1')"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </div>
        	</div>
        	<div class="col-xs-2 no-padding-left">
                <button class="btn btn-primary" ui-sref="groupmonth({startDate:vm.startDate})" ui-sref-opts="{reload: true}" >
                    <span class="glyphicon glyphicon-search"></span>
                    <span>
                       		{{'global.form.query' | translate}} 
                    </span>
                </button>
            </div>
        </div>
    </div>
    <br/>
    <div class="table-responsive">
        <table class="jh-table table table-striped">
            <thead>
                <tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.transition()">
                    <th jh-sort-by="month"><span data-translate="milkbeeApp.monitor.month">month</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="cardCount"><span data-translate="milkbeeApp.monitor.cardCount">cardCount</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="lightCount"><span data-translate="milkbeeApp.monitor.lightCount">lightCount</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="leaguerId"><span data-translate="milkbeeApp.monitor.leaguerId">leaguerId</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="monthGroupResult in vm.monthGroupResults track by monthGroupResult.leaguerId">
                    <td>{{monthGroupResult.month | date:'yyyy-MM'}}</td>
                    <td>{{monthGroupResult.cardCount}}</td>
                    <td>{{monthGroupResult.lightCount}}</td>
                    <td>{{monthGroupResult.leaguerId}}</td>
                    <td class="text-right">
                        <div class="btn-group flex-btn-group-container">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="text-center">
    
    	<div id="mycanvas" style="width: 100%;height:400px;"></div>
     </div>
</div>
